<!-- 角色管理 -->
<template>
  <div class="newProduct sys-content">
    <el-tabs v-model="active">
      <el-tab-pane label="商品基本信息" :name="1" :disabled="active !== 1 ">
        <goods-base-info ref="goodsBaseInfoRef" @nextStep="doNextStep" @close="doClose"></goods-base-info>
      </el-tab-pane>
      <el-tab-pane label="商品属性" :name="2" :disabled="active !== 2">
        <goods-attr ref="goodsAttrRef" @prevStep="doPrevStep" @nextStep="doNextStep" @close="doClose"></goods-attr>
      </el-tab-pane>
      <el-tab-pane label="商品资质" :name="3" :disabled="active !== 3">
        <goods-credential ref="goodsCredentialRef" @prevStep="doPrevStep" @nextStep="doNextStep" @close="doClose"></goods-credential>
      </el-tab-pane>
      <el-tab-pane label="商品促销信息" :name="4" :disabled="active !== 4">
        <goods-sell ref="goodsSellRef" @prevStep="doPrevStep" @close="doClose"></goods-sell>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="newProduct">
  import goodsBaseInfo from './goodsBaseInfo.vue'
  import goodsAttr from './goodsAttr.vue'
  import goodsCredential from './goodsCredential.vue'
  import goodsSell from './goodsSell.vue'
  import { ref } from 'vue'
  import { useStore } from 'vuex' 

  const store = useStore()
  // 定义传值给父组件数据方法
  const emits = defineEmits(['close'])

  // 通过ref获取dom
  const goodsBaseInfoRef = ref(null)
  const goodsAttrRef = ref(null)
  const goodsCredentialRef = ref(null)
  const goodsSellRef = ref(null)

  let active = ref(1)

  // 关闭弹窗
  function doClose() {
    goodsBaseInfoRef.value.clearEditor()
    store.commit('productId', '')
    window.sessionStorage.removeItem('merchantId')
    emits('close')
  }

  // 上一步
  function doPrevStep() {
    active.value -= 1
    if(active.value === 1) {
      goodsBaseInfoRef.value.init()
    } else if(active.value === 2) {
      goodsAttrRef.value.init()
    } else if(active.value === 3) {
      goodsCredentialRef.value.init()
    }
  }

  // 下一步
  function doNextStep() {
    active.value += 1
    if(active.value === 2) {
      goodsAttrRef.value.init()
    } else if(active.value === 3) {
      goodsCredentialRef.value.init()
    } else if(active.value === 4) {
      goodsSellRef.value.init()
    }
  }
</script>

<style lang="less" scoped>
.newProduct{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  :deep(.el-tabs){
    width: 80%;
  }
}
</style>